import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd'

const UserForm = forwardRef((props, ref) => {
  /*----------------------------------------------------定义state--------------------------------------------------------------*/
  /*----------------------------------------------------定义state--------------------------------------------------------------*/
  /*----------------------------------------------------定义state--------------------------------------------------------------*/
  /*----------------------------------------------------定义state--------------------------------------------------------------*/
  // 定义是否禁用输入
  const [isDisabled, setisDisabled] = useState(false)
  // 角色映射
  const roleObj = {
    "1": "superadmin",
    "2": "admin",
    "3": "editor"
  }
  // 获取用户信息
  const { roleId, region } = JSON.parse(localStorage.getItem("token"))
  /*--------------------------------------------------hooks调用方法-------------------------------------------------------------*/
  /*--------------------------------------------------hooks调用方法-------------------------------------------------------------*/
  /*--------------------------------------------------hooks调用方法-------------------------------------------------------------*/
  /*--------------------------------------------------hooks调用方法-------------------------------------------------------------*/
  useEffect(() => {
    setisDisabled(props.isUpdateDisabled)
  }, [props.isUpdateDisabled])
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  /*-----------------------------------------------------定义方法----------------------------------------------------------------*/
  // 当改变用户角色
  const changeRole = (value) => {
    if (Number(value) === 1) {
      setisDisabled(true)
      ref.current.setFieldsValue({
        region: "全球"
      })
    } else {
      ref.current.setFieldsValue({
        region: ""
      })
      setisDisabled(false)
    }
  }
  // 判断是否有权限改变区域
  const checkRegionDisabled = (item) => {
    if (props.isUpdate) {
      if (roleObj[roleId] === "superadmin") {
        return false
      } else {
        return true
      }
    } else {
      if (roleObj[roleId] === "superadmin") {
        return false
      } else {
        return item.value !== region
      }
    }
  }
  // 判断是否有权限改变角色
  const checkRoleDisabled = (item) => {
    if (props.isUpdate) {
      if (roleObj[roleId] === "superadmin") {
        return false
      } else {
        return true
      }
    } else {
      if (roleObj[roleId] === "superadmin") {
        return false
      } else {
        return roleObj[item.id] !== "editor"
      }
    }
  }
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板-----------------------------------------------------------------*/
  return (
    <Form ref={ref} layout="vertical">
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: 'Please input the title of collection!' }]} >
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true, message: 'Please input the title of collection!' }]} >
        <Input />
      </Form.Item>
      <Form.Item name="region" label="区域" rules={isDisabled ? [] : [{ required: true, message: 'Please input the title of collection!' }]} >
        <Select disabled={isDisabled} >
          {
            props.regionList.map(item =>
              <Select.Option value={item.value} key={item.id} disabled={checkRegionDisabled(item)}>{item.title}</Select.Option>
            )
          }
        </Select>
      </Form.Item>
      <Form.Item name="roleId" label="角色" rules={[{ required: true, message: 'Please input the title of collection!' }]} >
        <Select onChange={(value) => changeRole(value)}>
          {
            props.roleList.map(item =>
              <Select.Option value={item.id} key={item.id} disabled={checkRoleDisabled(item)}>{item.roleName}</Select.Option>
            )
          }
        </Select>
      </Form.Item>
    </Form>
  )
})

export default UserForm